What do you think of this new font and design plan? [closed]

Question

Hi WikiTreers,

As mentioned in December, we are working on a redesign of WikiTree. It's been 10 years since we last updated the overall look and feel of the website.

We now have an outline of the basic design choices we're planning: the new font, font size, margins, colors for links, buttons, status messages, feature boxes, etc.

Please check out https://www.wikitree.com/temp/style.html and see what you think.

• How does the overall page look on your device?
   
• Do you like the look of the colors, buttons, etc?
   
• Is the text inviting and easily readable?
   
• Is there the proper amount of contrast where text appears on a colored background?

We particularly need feedback from our Accessibility Angels on those last two questions.

App developers, you might also want to see https://www.wikitree.com/temp/columns.html and give more technical feedback.

Please, let us know your opinions and suggestions with an answer below. (Comments at the top will be hidden or moved once read.)

Thank you!

Chris and the WikiTree Team

Comments

Sorry I took so long to see this. 

Overall, terrific.  I'm concerned about how the colors will be used.  I think that some people finally allowed to use color may get carried away which will detract from readability.  And speaking of legibility, my main concern with color is that some people will opt for reverse type, leading to severely reduced readership.  Ask David Ogilvy, Confessions of an Advertising Man.  Reverse type, for me, leads to feelings of eye strain, and possible headache, depending on how determined I am to finish the piece.  

Finally, on this topic, people often don't know how to mix colors, not together, but in the same context, leading to similar headaches.  There are actually prank kinds of "artwork" having, for example, the word STRESS with a certain red on a certain blue (or other combinations),  background that actually lead to grinding of teeth (and that headache I mentioned)  

Answer 1

The sample page is GREAT!. The font size is perfect, colors and all other sizes and design are prefect. Great work on this.

Comments

Overall, everything is easy to read except the difference between the read and unread links. My problem is that the heading font sizes and spacing between lines will require even more scrolling when editing a profile than it does now. I find scrolling within the edit box and the background a royal pain.

---

My concern, too. A slightly condensed width would alleviate this problem and reduce the amount of required  scrolling.

---

I agree about the read and unread links. They both look the same to me, green. And I'm not color-blind.

---

Click on one. Turns pink when visited.

---

Using Windows 10 and Firefox latest version. Neither changes color when I click on them. They still look the same, both green. Same with the Atkinson Hyperlegible link, it is also green and doesn't change color when clicked.

---

I like it, love the spacing and font. But like others I see no color change in the read and unread links.

Answer 2

I like it. I've got the usual 'aging' eyesight and beginning cataracts, and was able to bring the text size down to the standard 100% with this font, where usually I have it set at 110%. Not a scientific case, but it did make reading a bit easier for me.
The button colors & contrasting type work well for me, too.

Comments

I usually have my browser set at 125%, but I did like Bobbie and reduced it to 100% to examine the sample page and also found it readable. Will this be applied to G2G also?

---

Same here. In fact, 100% is better than the larger setting.

---

Thank you, Bobbie.

Nelda, yes, changes would be made to G2G as well.

---

What Bobbie said.

Plus... The proposed difference between the green unvisited & black visited links is better than it is now, but I still have trouble. In playing with my display size (usually 110%), I clicked something that changed the layout/color palette - blue for unvisited/pinkish red for visited.

Love it! But would that cause problems for folks who are color blind? (I seem to recall some discussion about people having trouble seeing text printed in red.)

Would blue/black be an option?

---

Agree with Bobbie... and Liz. I am partially red/green blind. But it's only with certain hues, or depths of light and darkness of each. Deep red (fire engine) and light bright green (grass in sun) don't get confused. The med pros recommend using blue with orange or red or black, and not the same hues of red, green, and brown. Bright yellow is good too. A good site with lots of info and color palettes is:

David Nichols

---

"Love it! But would that cause problems for folks who are color blind? (I seem to recall some discussion about people having trouble seeing text printed in red.)

Would blue/black be an option?"

I have the common among males (10%) red green colour blindness, and I could just distinguish visited and unvisited when together, but I doubt I could decide which it was if on its own.  Blue/black would be easier for me.  Although, to be honest, I usually am not interested in the difference between visited or not, so long as I know it is a link which the cursor change tells me.

---

Thanks for all your work on this. It is looking good.
I only have one concern with it - I do agree with many of the other comments here about the colours for the visited link and the unvisited link -  I can't tell the difference between them (and I am not colourblind).

---

I agree. I am not colour-blind, but I see no difference between the visited and unvisited links. Otherwise it's BEAUTIFUL! Way to go TEAM!

---

Same for me

Answer 3

I like it! I cannot wait to give it a try. Thanks for all the work that went into this!

Answer 4

Love that the text being used has accessibility in mind. Can't wait to see how things look with the redesign!

Answer 5

I like the overall look of the page.  The Atkinson font is a good choice, I have several members of the Civil War who will welcome the change.   On tables, is the color blue no longer an option?

Comments

If you are using Template:Blue or custom CSS (not recommended) then these will remain as-is. These are not a part of the site design, but are functions within the site.

---

I can see why the currently used blue is not recommended.  It doesn't show up well against the dark skin and I can only read anything in that colour font if I run the mouse over it to highlight it.

---

For clarification, is this the "Blue" in question? If so, that is CSS styling and will not be affected by this design update.

---

No - the one you've linked to shows up very well as does the white text on it.  Sometimes however, people use a much lighter blue in background headings which shows up with unreadable white text for dark skin. users.

The one I was originally referring to is one used for text which is probably around #0000FF in the spectrum.

---

Gwyneth, can you provide a link to where I can view this 'blue' in use? I have a feeling that is from Template:Blue, which is a true blue (#0000ff).

If this is the case, as I noted above, this will not change since this is not a part of the core design of the site.

Also, custom theming, such as that provided by WBE should not be a consideration for the primary site design. It is likely that the theming will also have to be updated after these styles are completed and applied to the site.

---

I'm pretty sure you are right about this not being part of the core design. I think I misinterpreted the use of blue at the start of this thread.  From my own perspective, I'm well aware of the difficulties of selecting colours which work with dark and light backgrounds and of allowing for various colour sight problems.  There's never going to be a solution which suits everybody and I'm happy to use  "get arounds", as I mentioned earlier, highlighting with the mouse usually works as a quick fix.
https://www.wikitree.com/wiki/Space:England%2C_Regional_and_County_Statistics_Page#England

---

Yep, that is using the {{Blue|text here}} template to display the text in bluw. This will not be affected.

---

Yes, that is the color I was wondering about.  Thank you for clarifying that for me.

Answer 6

The visited link and the unvisited link are the same for me.  Also the coloured rounded boxes are square at the left-hand edge rather than rounded - the white rounded box appears as expected (rounded at all four corners).  PC - Win 11 Home - Chrome 124.0.6367.93

Comments

Moving this to a new answer because I have additional data

---

@Sheena, it is a little counter-intuitive, but click on a link, and then go back to the style page and it will update.

the coloured rounded boxes are square at the left-hand edge rather than rounded

I believe this intended, and has to do with the left border design.

---

I use high security on my browser, which prevents the color change for visited link. Perhaps you have similar settings on your browser, Sheena.

edit: It may be use of Private Browser mode that prevents the visited links to change color.

---

Perhaps the colored rounded boxes should be designated as half-rounded, for clarity.

---

If we are to choose between/among the square and rounded/half-rounded boxes, I vote for rounded and/or half-rounded.

---

Steven, is there a reason, other than aesthetics, that WikiTree doesn't use blue for unvisited links and purple for visited links? I agree there is not enough contrast between unvisited links and visited links on the sample page, but there's not enough contrast in our current palette either so any improvement would be good.

---

@Lindy and @Sheena,

The questions asked by Chris are mainly about visual style, not the naming of elements. Remember, 99% of our users will only experience the styles and not interact with the names directly. So our focus should remain on how these elements look and function rather than their class names.

---

Here is the longer, more technical explanation:

Class names are primarily used as identifiers for elements within the codebase, rather than literal descriptions of those elements. When you initially create class names, they often reflect the visual or functional characteristics of the components they style. For example, 'Rounded Green Box' was named when the box was rounded on all corners, the border was colored green, and the background what white.

However, as designs evolve, these visual or functional attributes might adjust. So now, the 'Rounded Green Box' only has rounded corners on the right, a light green background, and a dark green border on the left reflecting an updated design decision. Despite these changes, the original class name remains the same.

Renaming classes can lead to a cascade of updates across the entire project, which is both time-consuming and prone to error. Maintaining the original class names ensures consistency and stability in the code, especially for elements that are already widely used. The focus is on the style and maintainability rather than the literal accuracy of the names.

---

Possibly dull reply: I had to click the link once again for the font to change into a deeper green.

---

I find the names of the various elements to be relevant to my evaluation of them. If 2 visually different elements have the same name, how do I know which of them I am evaluating, or if I need to evaluate their differences?

I believe that my comments addressed Chris' lead question, as well as a couple of his secondary questions.

I am not suggesting any name clarification for the programming, just for the display name of the boxes on the page we are evaluating.

---

edit: To clarify my original comment, I feel the style page does not make clear that the 3 square-corners boxes are group 1; and the full-rounded-corners box and 2 half-rounded-corner (as I see/call them) boxes are group 2.

Answer 7

As an old-time WikiTreer, not to mention an old-timer, I've been looking forward to the redesign. I like everything about it, particularly the typeface.

Answer 8

For accessibility of color blind individuals the alerts probably should not rely only on red, yellow, green colors with the same ! symbol for the different statuses.  Maybe use yellow with an exclamation symbol for warning, green with a check mark symbol for success and red with an X symbol for failure.

Comments

This!

---

I confirmed the concern with someone who has what is commonly referred to as "red-green" color blindness.He could not identify the alerts by color. He also could not distinguish the green vs orange boxes. The boxes would also need symbols to differentiate what the colors are intended to represent.

---

Agree with this. I would suggest that a different icon be used for each status. That's the usual UX pattern to follow. Warning could be the exclamation in a circle, Success a tick mark and error/alert perhaps an exclamation in a triangle - as ideas.

---

I would think this should be a simple fix. The current CSS as I read it is declaring most of the "alert" box settings in the first element, the yellow or amber box that says "Default status for warnings." That includes all font settings, margins and paddings, and the exclamation point symbol:

background-image: url('/images/icons/icon-exclamation.svg');

The settings for .status.green and .status.red change nothing but the background and border colors for the boxes. It should be quick and easy to add different background-image declarations for all three alert types.

---

Edison et al.,

I am sure this will be taken into account on review of the comments; however, I wanted to point out that this is not new, and the images are the same for the current style.

If you like, you can compare some of this to the current styles: https://www.wikitree.com/css/examples.html

---

Steven,

Understand the issue may not be new, but the redesign would be a good time to fix it, especially if a goal is improved accessibility. There are several different types of color blindness but overall the numbers I generally see referenced are up to 9% of men and 1% of women have some degree of perceiving colors differently. This is why UX best practice is to never rely on just color alone to communicate.

While the alerts and boxes on the site have accompanying text to communicate a message the colors are used as an attempt to clearly indicate a good/bad status or emphasize a point/warning. However, since color does not work to accomplish this as intended for those that are color blind additional visual clues such as symbols are helpful for them.

---

I thought perhaps we could use one ! for success, two !! for warning, and three !!! for failure and keep the green, yellow, and red because most people can see that.

---

There should be a lot of flexibility there. That "icon-exclamation.svg" image file is one that comes stock with a lot of WordPress templates, and there are loads to choose from. But anyone with Adobe Illustrator or similar can create custom .SVG images for whatever is desired.

Another viable option that I use regularly is from FontAwesome, literally tens of thousands of icons ready for direct use on webpages.

Answer 9

1) The overall page looks good. The margins may be a bit wide.

2) The overall look is appealing.

3) The text is hyper-legible, as promised. This is a big win for accessibility. However, I find the default font size to be a bit big, and when I reduce the font in hopes of getting more words per line, the margins increase instead.

4) Contrast on coloured backgrounds seems adequate to me.

Overall, I like what I see. Thanks for the preview.

Edited to add:

I agree with comments on the Warning, etc.,  boxes. Standardized symbols are needed, along with eponymous alt text.

Comments

I agree -- I like the overall look, but I find the text headings ANNOYINGLY HUGE. I think the text headings should be toned down a little and margins reduced a bit to increase readability and not distract from the text.

---

I agree, the headings are too big.

---

I agree with Murray’s and Edie’s points here.

---

Yes, the headings are way too big, especially Heading 2-6.
We need a much bigger size gap between Heading 2 and Heading 3 to clearly signal Heading 3 is a sub header. This is a problem already in the old design.

---

Thank you! Good feedback.

---

Definitely agree with the comment re headings 1, 2 and perhaps 3 being far too large. My sight isn't great, but for me, the smaller ones are perfectly adequate and stand out.

Answer 10

I really like the new fonts. Thank you!

I second the suggestion that you add symbols to the warnings for the color-blind.

My only other comment also supports a previous note:  The visited link and the unvisited link look exactly the same. This is using my phone with a Kiwi browser and my laptop with a Safari browser.

Answer 11

This looks great to me. As another aging member with some vision issues, I am really excited about the new redesign and can't wait to try it!

Answer 12

Hmm....

Not bad. Not bad at all. I think I'd need to see it on an actual page before I can get a good read on it. But, the sample is pretty decent. Good work!

Comments

LIke Chris F, I'd like to see this applied to some examples of "real" profiles, free-space pages, and categories so I can see how elements like the different heading levels, blockquotes, tables, maintenance boxes, project boxes, and category infoboxes would be displayed. It's likely that not all of these have had new formats devised yet, but I think it should be possible to mock up some of thee elements.

---

I'm with Chris and Ellen on this.

---

Without seeing this applied to a “real” page, it is hard to make a judgement. The font strikes me as “OK,” but does not really stand out to me. I have no visual issues, so I cannot comment on readability.

How will the various colors be used? Again, without a concrete example (except for the alert boxes), there is not much to make a judgement on. From comments of others, some colors do not help those with color blindness.

The font sizes for the higher level headings seem much too large, but again how will they be used? I have seen other works (usually printed) where a font is too large relative to other text which, to me, renders the work unprofessional.

---

I would like to see this on a 'real' page too. Pages with lots of different headings, colours and font sizes combined with links, stickers and pictures are nice to look at (possibly) but hard to reed.

---

I agree with above that it is hard to judge without seeing the effect on a real page. I would like to see it on some complex pages like: 

* https://www.wikitree.com/wiki/Raiffeisen-1

* https://www.wikitree.com/wiki/Space:Familienchronik_Augustin_Frebel

* https://www.wikitree.com/wiki/Space:Gisinger_and_Geisinger_in_G%C3%B6tzis

Answer 13

I like the font.

I echo Erika's concern about the error colours, and will ask my husband to take a look at it.  He is colour-blind, and many websites are difficult, due to the colours used.

Answer 14

I love it! The Atkinson font is a good round font for easy readability. The colors are perfect too.

Answer 15

Like several others, the visited and unvisited links look the same (dark green with an underline) using both Chrome and Safari.

• Win 10 Home Chrome Version 124.0.6367.119
• iPhone 12 Pro Max  iOS Version 17.4.1
• iPad mini (5th Gen) iPadOS Version 17.4.1

Please let me know if you need the iPhone & iPad Chrome and Safari versions

I agree with Eric and Susan about using different symbols for the alert messages in addition to the colors.

Comments

The unvisited link and visited link look the same on my laptop (Windows 11 running both Firefox and Google Chrome), but the distinction between them is clear on my phone (Android running Google Chrome).

---

Just saw Steve's response to Sheena about the difference between visited and unvisited, so I tried it. Now what I'm seeing is both links are still underlined. The unvisited is a dark green. The visited is a darker green or black on my iPad. If that's what you're expecting us to see I will probably continue using my extension that lets me set the visited link colors (edited to add, I turned my extension off while testing).

---

Here's the entirety of the link styling settings in the CSS stylesheet:

a,a:link {
  color: #008000;
  text-decoration: underline;
}

  a:hover { color: #008000; text-decoration: none; }

  a:visited { color: #25422d; }

The underline is set to appear on all links unless you're hovering your mouse over one, and the two link colors are essentially a pure green and a dark green-gray. The pure green is only slightly different than the one WT uses today (it's a very slightly lighter shade), and the dark green-gray for visited links is the same as the one currently in use:

---

I was hoping for better contrast with the new layout. I use a Chrome extension to change the colors of the fonts for visited and unvisited because the difference between the green and the dark green was invisible to my cataract laden eyes. It's a little more distinguishable now that the cataracts have been removed but not enough to work with it in anyway that is quick to see.

---

This unvisited vs. visited link issue is not related to any custom settings I have created in the browsers on my laptop.

On my laptop, as currently configured, I can see the difference between unvisited links (green) and visited links (very dark green) in the current WikiTree display.

In the example of the proposed future display I do not see any distinction on my laptop (both types of links show up as green).

---

On my iPad using Safari, I clicked the unvisited link to see the difference. That link is no longer underlined; and with the text being such a dark gray-green, I can’t even tell it’s a link. It blends in with the rest of the text. Perhaps it’s just a glitch in the coding only on that page? All other visited links are still underlined.

Answer 16

This is really welcome. I have had some sight problems all my life, and they are now compounded by age and by worsening cataracts. The redesign and new font are a real improvement for me. Thank you!

Answer 17

Please give an option to keep existing profiles in “tradfont”.  Having lived through modernisation and “upgrades” with many other programs, I shudder to think what may happen to the thousands of profiles already carefully crafted under current conditions.

I’m not against change per se, but rather painfully aware of the law of unintended consequences.

Answer 18

The yellow and orange colors are too vivivid, and the green does not contrast well with white text.

Answer 19

This is looking great!

My only feedback is on the contrast of the primary button. My gut feeling is to reverse the background and hover-background colors (#fad158 as primary, #fcb815 as hover). But that may just be me.

Comments

Agreed

Answer 20

oops, unvisited link gives an error.  

Not entirely sure what the difference really is between Atkinson font and existing font on profiles.  Not finding it more legible, one thing I would actually like is better contrast between letters and background, regardless of font.  

The ''sample text'' appears to be in Latin, and I keep trying to read it.   My study of Latin is very far back in time.  Could we get a text that more people can actually read please?  Even ''The quick brown fox....'' would be better.

Where did Blue go?  Not showing at all in the colours.  

Not sure what you define as ''primary button'' and ''secondary button''.  The lines describing them are rather sparse.  What exactly would get changed with these?

Comments

Blue is not a standard WikiTree color. The only way it has been used is through custom CSS and the use of Template:Blue. These should not change since they are not a part of the regular style.

If you can provide a link to a place where 'blue' is used, I can look into it further.

---

ah, I see, explanations elsewhere have answered some of my questions. Blue is used by me primarily in bio text, so since it isn't changing that, fine. 

Meanwhile, the unvisited text link on the proposal page is still not working for me.

Other than that, is there any way the font can be made darker somehow, other than bolding everything?  Legibility on a computer screen is affected.  For example current display versus this.  (bold type here) 

---

#eeedff looks light blue to me on there.

---

The #eeedff looks more purple to me than blue.

---

obvious vision differences, or maybe it's the computer settings.

---

Light blue, here, as well.